<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="utf-8">
    <meta name="viewport"
          content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
    <title>成功购票</title>
    <link href="../../../css/mui.min.css" rel="stylesheet"/>
    <link href="./buy-success.css" rel="stylesheet"/>
</head>
<body>
<header class="mui-bar mui-bar-nav sus-blue">
    <h1 class="mui-title sus-blue">成功购票</h1>
</header>
<div class="sus-content">
    <div class="sus-box">
        <div class="sus-title">
            <div class="mui-col-xs-4">起点</div>
            <div class="mui-col-xs-4">&nbsp;</div>
            <div class="mui-col-xs-4">终点</div>
        </div>

        <div class="sus-address">
            <div class="mui-col-xs-4">倪家桥</div>
            <div class="mui-col-xs-4">
                <img src="../../../images/ticket/turn-right.png" alt=""/>
            </div>
            <div class="mui-col-xs-4">金融城</div>
        </div>
    </div>

    <div class="sus-box">
        <div style="position:absolute;left: 30px;">二维码：</div>
        <div class="sus-getway">
            <img src="../../../images/ticket/QR-code.png" alt=""/>

            <p>在取票机扫码、输入取票码或使用NFC均可取票</p>
        </div>
        取票号：<strong style=" font-size: 20px;">20160715223542</strong>
    </div>
    <div class="sus-box" style="padding-bottom: 0">
        详细信息
        <hr style="border-top:1px solid #fdfdfd;margin-top:10px ;"/>
        <div class="sus-row">
            <div class="mui-col-xs-6">时间：</div>
            <div class="mui-col-xs-6">8分钟</div>
            <div class="mui-col-xs-6">换乘：</div>
            <div class="mui-col-xs-6">0次</div>
            <div class="mui-col-xs-6">途经站点：</div>
            <div class="mui-col-xs-6">4站</div>
        </div>

      <div class="station-pass-box">
          <div class="station-pass">
              <div>倪家桥</div>
              <div>桐梓林</div>
              <div>火车南站</div>
              <div>高新</div>
              <div>金融城</div>

              <img class="station-start" src="../../../images/ticket/img-start.png" alt=""/>
              <img class="station-end" src="../../../images/ticket/img-end.png" alt=""/>
          </div>

      </div>
    </div>
    <div style="margin-bottom: 20px;padding: 20px 30px;color: #353535;">
        <h4 style="margin: 10px 0;">倪家桥地铁站</h4>
        <p>成都倪家桥路西北出口</p>
        <p>实付金额：2元</p>
        <p>购买时间：2016年7月15日22:45</p>
        <p>订单号：20160715223542</p>
        <p>车票编号：20110080010244921</p>
        <p>车票由成都地铁提供</p>
        <h4 style="margin:30px 0 10px 0;">取票须知：</h4>
        <p>
            地铁票一旦取出，无法进行退票操作。进站后，请妥善保管车票，以便出站时使用。请不要将车票弯曲、折叠或污损。如车票丢失，请补票室补票后出站。其他详细规则参见《地铁购票注意事项》。
        </p>
    </div>
    <form>
        <button class="sus-btn">我要退票</button>
    </form>
</div>
</body>
</html>